<nz-card [nzBordered]="false" [nzNoHovering]="true">
  <ng-template #body>
    <form class="profile-container" nz-form [formGroup]="forms" (ngSubmit)="submitForm($event)" *ngIf="profile && forms">

      <ng-template ngFor let-item [ngForOf]="profile">
        <div class="profile-item" nz-row *ngIf="!item.edit">
          <div class="profile-item-label" nz-col [nzSm]="8" [nzXs]="24">{{item.alias}}</div>
          <div class="profile-item-conten" nz-col [nzSm]="8" [nzXs]="24">
            {{item.value}}
            <i class="anticon anticon-edit profile-item-edit-icon" (click)="editProfile(item)" *ngIf="item.editable"></i>
          </div>
        </div>
        <div nz-form-item nz-row *ngIf="item.edit && item.editable">
          <div nz-form-label nz-col [nzSm]="8" [nzXs]="24">
            <label nz-form-item-required *ngIf="item.required">{{item.alias}}</label>
            <label *ngIf="!item.required">{{item.alias}}</label>
          </div>
          <div nz-form-control nz-col [nzSm]="8" [nzXs]="24" nzHasFeedback>
            <nz-input [nzSize]="'large'" [formControlName]="item.key"></nz-input>
            <div nz-form-explain *ngIf="getFormControl(item.key).dirty && getFormControl(item.key).errors">
              <span *ngIf="item.email">输入的{{item.alias}}无效！</span>
              <span *ngIf="!item.email">请输入你的{{item.alias}}！</span>
            </div>
          </div>
        </div>
      </ng-template>

      <div class="profile-item" nz-row>
        <div class="profile-item-label" nz-col [nzSm]="8" [nzXs]="24">密码</div>
        <div class="profile-item-conten" nz-col [nzSm]="8" [nzXs]="24">
          <a class="profile-item-password" title="修改密码" (click)="resetPassword()">修改密码</a>
        </div>
      </div>

      <div nz-form-item nz-row *ngIf="edit">
        <div nz-form-control nz-col [nzSpan]="8" [nzOffset]="8">
          <button nz-button [nzSize]="'large'" [nzType]="'primary'" [nzLoading]="loading">更新</button>
          <button type="button" nz-button [nzSize]="'large'" [nzType]="'default'" (click)="cancelEdit($event)">取消</button>
        </div>
      </div>

    </form>
  </ng-template>
</nz-card>